<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/jquery/jquery.js"></script>
    <script src="../js/jquery_mobile/jquery.mobile-1.4.2.js"></script>
    <link rel="stylesheet" href="../css/jquery_mobile/jquery.mobile-1.4.2.css"/>
    <script src="../js/jquery/jquery.cookie.js"></script>


</head>
<body>
<div data-theme="b" data-role="header">
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext">Back</a>
    <h1 class="ui-title">
        用户信息
    </h1>
</div>
<!--
    由于jquery mobile的机制
    需要加载js，css等内容，得
    在data-role="content"内
    写入js和css
-->
<div role="main" data-role="content" class="ui-content">
    <!--外部js开始-->
    <script>
        $(function(){
            /**
             * 设置对应的值，这边的内容应该从cookie中读取和设置
             * 读取cookie这里使用了jquery.cookie.js插件
             * 插件官网文档http://plugins.jquery.com/cookie/
             */
            $("#name").text("用户名：家属");
            $("#phone-number").text("13631283046");
        });
    </script>
    <!--外部js结束-->

    <h4 id="name">
        用户名：
    </h4>
    <hr style="height:3px; background-color:#ccc; border:0; margin-top:12px; margin-bottom:12px;">
    <a id="book_list" href="#page1" data-icon="arrow-r" data-iconpos="right"
       class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-shop">
        已下订单
    </a>

    <h4>
        手机号码：
    </h4>
    <a id="phone-number" href="#page1" data-icon="arrow-r" data-iconpos="right"
       class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-edit">
        13631283046
    </a>
    <a class="ui-btn ui-shadow ui-btn-b">
        前往商品浏览
    </a>
</div>
</body>
</html>